<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ page language="java" import="java.util.*"%>
<%@ page import="com.itr.kbm.model.SessionDataObject"%>

<%
	if (session.getAttribute("logindata") == null) {
		response.sendRedirect(request.getContextPath() + "/billing");
%>
<br />
<h4>
	You are not logged in !! Go to <a class=""
		href="${pageContext.request.contextPath}/billing/"> Register Page
	</a>
</h4>
<br />
<%
	} else {
		SessionDataObject object = (SessionDataObject) session
				.getAttribute("logindata");
%>
<div class="col-md-9">
	<%
		if (object.getTypeUser().equals("adminKopeg")) {
	%>
	<div class="row">
		<form role="form" name="summary-form" id="summary-form"
			action="${pageContext.request.contextPath }/request-logout">
			<div class="form-group">
				<div class="col-md-9">
					<br />
					<h4>
						Hi,
						<%=object.getKodeKopeg()%>
						<%=object.getKodeKoptelProduct()%>
						!! ~ Welcome to Billing Management ~
					</h4>
				</div>
			</div>
			<div class="form-group">
				<div class="col-md-3">
					<input type="submit" id="show-report-button" name="submit"
						value="Log Out" class="form-control btn btn-default" />
				</div>
			</div>
		</form>
		<br /> <br />
		<h2>SUMMARIZE KOPEG</h2>
	</div>

	<div class="row form-row">
		<form name="summary-form" class="form-inline" id="summary-form"
			action="${pageContext.request.contextPath }/request-report_kopeg"
			role="form" method="post" enctype="application/x-www-form-urlencoded">
			<label>Select Report &nbsp; &nbsp;</label>

			<div class="form-group">
				<select name="month" class='form-control' id="month">
					<option value="1">January</option>
					<option value="2">February</option>
					<option value="3">March</option>
					<option value="4">April</option>
					<option value="5">May</option>
					<option value="6">June</option>
					<option value="7">July</option>
					<option value="8">August</option>
					<option value="9">September</option>
					<option value="10">October</option>
					<option value="11">November</option>
					<option value="12">December</option>
				</select>
			</div>

			<jsp:useBean id="now" class="java.util.Date" />
			<fmt:formatDate var="year" value="${now}" pattern="yyyy" />

			<div class="form-group">
				<select name="year" class="form-control" id="year">
					<c:forEach begin="0" end="4" varStatus="loop">
						<c:set var="currentYear" value="${year - loop.index}" />
						<option value="${currentYear}"
							${year == currentYear ? 'selected="selected"' : ''}>${currentYear}</option>
					</c:forEach>
				</select>
			</div>
			<div class="form-group">
				<input type="submit" id="show-report-button" name="submit"
					value="Show Report Kopeg" class="btn btn-default" />
			</div>
		</form>
	</div>

	<h2>${m } ${y }</h2>
	<br>
	<c:if test="${icon.equals('fail')}">

		<h5 style="color: red; border-style: solid;">
			<img
				src="${pageContext.request.contextPath}/assets/img/icon/fail.png"
				width="40px">${alert }
		</h5>
	</c:if>
	<c:if test="${icon.equals('success')}">

		<h5 style="color: green; border-style: solid;">
			<img
				src="${pageContext.request.contextPath}/assets/img/icon/success.png"
				width="40px">${alert }
		</h5>
	</c:if>


	<c:if test="${!empty report }">

		<form id="loading-form" name="loading-form"
			action="${pageContext.request.contextPath }/request-merge"
			role="form" method="post">
			<div class="form-group">
				<div class="col-md-9">
					<div class="panel panel-default" class="form-control">
						<div class="panel-body">
							<jsp:useBean id="nows" class="java.util.Date" />
							<h4>
								File Upload Status Until
								<fmt:formatDate type="date" value="${nows}" />
							</h4>

							<h5>
								<table>
									<tr>
										<td>Total</td>
										<td>&nbsp&nbsp:</td>
										<td>&nbsp ${totalKopeg } Kopeg</td>
									</tr>
									<tr>
										<td>Success</td>
										<td>&nbsp&nbsp:</td>
										<td>&nbsp ${success } Kopeg</td>
									</tr>
									<tr>
										<td>Failed / Not Yet</td>
										<td>&nbsp&nbsp:</td>
										<td>&nbsp ${failed } Kopeg</td>
									</tr>
								</table>
							</h5>
						</div>
					</div>
				</div>
			</div>
			<input type="hidden" name="month" value="${month }" /> <input
				type="hidden" name="year" value="${y }" />
			<div class="form-group">
				<div class="col-md-3">
					<input type="submit" id="summarize-button" name="submit"
						value="Summarize & Download" class="form-control btn btn-default" />
				</div>
			</div>
		</form>
		<br />
		<br />
		<br />
		<div class="row table-row">
			<div class="input-group filter">
				<span class="input-group-addon">Filter</span> <input id="filter"
					type="text" class="form-control" placeholder="Type here...">
				<span class="input-group-btn"> </span>
			</div>
			<table class="table table-striped table-bordered table-condensed">
				<thead>
					<th>#</th>
					<th>Kode Kopeg</th>
					<th>Type</th>
					<th>Date</th>
					<th>Status</th>
				</thead>
				<tbody class="searchable">

					<c:forEach items="${report }" var="report" varStatus="i">

						<tr class="${report.status}">
							<td>${i.count }</td>
							<td>${report.kodeKopeg }</td>
							<td>${report.type }</td>
							<td><fmt:formatDate type="date" value="${report.date}" /></td>
							<td>${report.status }</td>
						</tr>

					</c:forEach>


				</tbody>
			</table>
			<div class="pagination-page"></div>
		</div>
	</c:if>

	<%} %>
	<br />
</div>
<%} %>
<script type="text/javascript">
	jQuery(function($) {
		var items = $('.searchable tr');

		var numItems = items.length;
		var perPage = 10;

		items.slice(perPage).hide();

		$(".pagination-page").pagination({
			items : numItems,
			itemsOnPage : perPage,
			cssStyle : "light-theme",
			onPageClick : function(pageNumber) {
				var showFrom = perPage * (pageNumber - 1);
				var showTo = showFrom + perPage;

				items.hide().slice(showFrom, showTo).show();
			}
		});
	});

	$("form[name=loading-form]").submit(function() {
		showLoadingScreen();
		setTimeout(showTable, 60000);
		return true;
	});

	$(document).ready(function() {

		$('#filter').keyup(function() {

			var rex = new RegExp($(this).val(), 'i');
			$('.searchable tr').hide();
			$('.searchable tr').filter(function() {
				return rex.test($(this).text());
			}).show();

		});
	});

	function showTable() {
		//$(".table-row").show();
		hideLoadingScreen();
	}
</script>
<style type="text/css">
h2 {
	border-radius: 4px 4px 0 0;
	padding: 10px 15px;
	font-size: 16px;
	margin: 0px;
	background-color: #27ae60;
	color: #fff;
}

.filter {
	margin: 15px 0 5px 0;
}

.form-row {
	background-color: #f3f3f3;
	padding: 15px;
	border-radius: 0 0 4px 4px;
}

.false td {
	background-color: #ff5e63 !important;
	color: #fff;
}
</style>